//HtmlWebpackPlugin 以某一个html作为一个模板，然后生成一个html文件，引入打包后的js文件

const HtmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')

module.exports = {
  //mode 模式中的 producttion 代表生产模式
  mode: 'production',
  devServer: {
      port: 4444,
  },
  //entry 入口
  entry: './src/main.js',
  output: {
    clean: true, //每次打包之前清空 dist 目录下的代码
    path: path.join(__dirname, 'dist'), //出口路径
    filename: 'bundle.js', //出口文件名
  },
  plugins: [new HtmlWebpackPlugin({
    template: './public/index.html' //以对应的html文件作为模块生成新的html文件
  })],
  module: {
    rules: [  //loader 的规则
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader","less-loader"],
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        //asset 的作用会把小于 8kb 的转化为 base64
        //把大于8kb的原图片输出
        type: 'asset',  
      },
      {
        //不需要处理字体文件，直接原文件输出即可
        //所以使用的是 asset/resource 模式
        //asset/resource 模式会直接输出原文件
        test: /\.(eot|svg|ttf|woff|woff2)$/i,
        type: 'asset/resource',
        generator: {
          //根据
          filename:'font/[name].[hash:6][ext]'
        }
        
      },
      {
        test: /\.js$/i,
        exclude: /(node_modules)|(bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ],
  },
};